<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import ActiveNumber from "@/components/active-number/index.vue";
// 访客统计数据
const stats = ref({
  today: 358,
  online: 1967,
  total: 3210,
});

// 当前激活的卡片索引
const activeCardIndex = ref(-1);
let hoverTimer = null;

// 启动自动hover动效
const startAutoHover = () => {
  hoverTimer = setInterval(() => {
    activeCardIndex.value = (activeCardIndex.value + 1) % 3; // 3张卡片循环
  }, 2000); // 每2秒切换一次
};

// 停止自动hover动效
const stopAutoHover = () => {
  if (hoverTimer) {
    clearInterval(hoverTimer);
    hoverTimer = null;
  }
  activeCardIndex.value = -1;
};

onMounted(() => {
  // 延迟1秒后开始自动hover效果
  setTimeout(() => {
    startAutoHover();
  }, 1000);
});

onUnmounted(() => {
  stopAutoHover();
});
</script>

<template>
  <div class="subhead">
    <div class="text">访客记录</div>
  </div>
  <div class="stats-cards">
    <div
      class="stat-card"
      :class="{ 'is-active': activeCardIndex === 0 }"
      @mouseenter="stopAutoHover"
      @mouseleave="startAutoHover"
    >
      <div class="stat-label">今日访客</div>
      <div class="stat-value">
        <ActiveNumber :value="stats.today"></ActiveNumber>
      </div>
      <div class="stat-unit">人次</div>
    </div>
    <div
      class="stat-card"
      :class="{ 'is-active': activeCardIndex === 1 }"
      @mouseenter="stopAutoHover"
      @mouseleave="startAutoHover"
    >
      <div class="stat-label">在线访客</div>
      <div class="stat-value online">
        <ActiveNumber :value="stats.online"></ActiveNumber>
      </div>
      <div class="stat-unit">人</div>
    </div>
    <div
      class="stat-card"
      :class="{ 'is-active': activeCardIndex === 2 }"
      @mouseenter="stopAutoHover"
      @mouseleave="startAutoHover"
    >
      <div class="stat-label">累计访客</div>
      <div class="stat-value">
        <ActiveNumber :value="stats.total"></ActiveNumber>
      </div>
      <div class="stat-unit">人次</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.stats-cards {
  display: flex;
  gap: 12px;

  .stat-card {
    flex: 1;
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.1) 0%,
      rgba(49, 190, 255, 0.05) 100%
    );
    border: 1px solid rgba(49, 190, 255, 0.3);
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;

    &:hover,
    &.is-active {
      transform: translateY(-2px);
      border-color: rgba(49, 190, 255, 0.6);
      box-shadow: 0 4px 12px rgba(49, 190, 255, 0.2);
    }

    .stat-label {
      font-size: 12px;
      color: rgba(246, 249, 254, 0.7);
      margin-bottom: 8px;
    }

    .stat-value {
      font-size: 32px;
      font-weight: 700;
      color: #31beff;
      font-family: "YouSheBiaoTiHei", sans-serif;
      line-height: 1;
      margin-bottom: 4px;

      &.online {
        color: #00ff88;
        animation: pulse 2s ease-in-out infinite;
      }
    }

    .stat-unit {
      font-size: 12px;
      color: rgba(246, 249, 254, 0.5);
    }
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  }
  50% {
    opacity: 0.8;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
  }
}
</style>
